Amelia Bellamy-Royds

CSS and SVG — The Dynamic Duo!

When deciding how to integrate graphical effects in your web design, it's easy to see CSS and SVG as competing options. But these two tools are better together. Static SVG images created by graphics software rarely use CSS, but a little CSS code can transform those SVG files into dynamic, interactive, and responsive graphics. This session will introduce many of the ways CSS can be used to enhance SVG. It will start by outlining how CSS for SVG is similar and different from CSS for HTML, with some practical tips to avoid common difficulties. Then we will start having some fun. It will be a rapid overview of the (many) possibilities, not a detailed tutorial. The discussion should be accessible to SVG beginners — assuming you know a thing or two about CSS! However, it will not be a general introduction to SVG, instead focusing on how you can adapt and enhance existing SVG code.